<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>邀请奖励</span>
      </div>
      <div class="invite-box">
        <el-alert
          title="邀新有奖! 好友通过自己的邀请码注册有奖励,点击下方按钮复制邀请码"
          type="success"
          effect="dark"
          :closable="false"
          center
        >
        </el-alert>
        <el-button
          type="primary"
          style="margin-top: 5px"
          @click="createCode"
          :disabled="inviteCode.length > 0"
          >生成邀请码</el-button
        >
        <el-input v-model="inviteCode" class="invite_code" readonly></el-input>
        <div>
          <el-button
            v-clipboard:copy="inviteCode"
            v-clipboard:success="onSuccess"
            v-clipboard:error="onError"
            type="primary"
            style="margin-top: 5px"
            >复制邀请码</el-button
          >
        </div>
        <el-divider></el-divider>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>已邀请名单</span>
          </div>
          <el-table :data="tableData" style="width: 100%" border stripe>
            <el-table-column prop="name" label="已邀请用户" width="180">
            </el-table-column>
            <el-table-column prop="registerTime" label="注册时间" width="180">
            </el-table-column>
            <el-table-column prop="award" label="奖励"> </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      tableData: [],
      //   邀请码
      inviteCode: "",
    };
  },
  methods: {
    ...mapActions({
      createInviteCode: "user/createInviteCode", // 生成邀请码
      getInviteList: "user/getInviteList", // 获取邀请列表
    }),
    createCode() {
      this.createInviteCode().then((res) => {
        this.inviteCode = res.invite_code;
      });
    },
    onSuccess(){
        this.$message.success('已复制');
    },
    onError(){
        this.$message.error('复制失败');
    }
  },
  computed:{
    ...mapGetters(['invite_code'])
  },
  created(){
    this.inviteCode = this.invite_code || ''
    this.getInviteList().then( res =>{
        this.tableData = res.list
    })
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  .invite_code {
    width: 350px;
    margin-left: 5px;
  }
}
</style>